<template>
  <div>
    <header>
      <h1 id="titleName">todolist</h1>
    </header>
    <main>
      <div class="mainContent">
        <section id="inputSection" class="mainSection">
            <div class="inputDiv">
              <input class="inputLine" id="inputLine" placeholder="Add new todo" />
              <button class="smbtn" type="submit" id="smbtn" v-on:click="submitTask" @mousedown="smdown" @mouseup="smup">submit</button>
            </div>
        </section>
        <ul id="taskList" class="ulist">
		</ul>
        <footer>
          <p id="foot" class="taskInput listFoot">
            <span id="numDisplay"></span>
          </p>
        </footer>
      </div>
    </main>
    <footer class="pageFooter">
      <p class="pageFooterText">
            吴夏 | 软件工程实践课程软件开发课程作业<br />

      </p>
    </footer>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: 'HelloWorld',
  data(){
	return {
		num: 0,
    line: [],
	}
  },
  props: {
    msg: String,
  },
  beforeCreate: function () {
	this.$nextTick(() => {
		let input=document.getElementById("inputLine");
		input.addEventListener("keydown", (e) => {
			if(e.key == "Enter")
			{
				if(input.value!="")
				this.submitTask(e);
				input.value="";
			}
		});
    this.load();
    this.updateNum();
	});
  },
  created: function() {

  },
  mounted() {
    window.windowDeleteLine = obj => {
        this.deleteLine(obj)
    },
	window.windowDelLi = obj => {
		this.delLi(obj)
	}
  },
  methods: {
    load: function (){
      request.get('/list', {
      }).then(res => {
        //console.log(res.data);
        this.line = res.data;
        this.createLine();
      })
    },
    save: function (){
      let lineValue = {
        content: document.getElementById("inputLine").value,
      }
      request.post("/user", lineValue).then(res => {
        console.log(res);
        this.addItem(res.data);
      });
    },
    finish: function (obj){
      let nowStatus;
      let whichLi=obj.parentNode;
      if(obj.checked){
        nowStatus=0;
        whichLi.setAttribute("class","listItem taskInput listItemChecked");
        this.num--;
        this.updateNum();
      }
      else {
        nowStatus=1;
        whichLi.setAttribute("class","listItem taskInput");
        this.num++;
        this.updateNum();
      }
      let lineValue = {
        id: whichLi.id,
        content: whichLi.getElementsByTagName("span")[0].textContent,
        status: nowStatus,
        exist: 1,
      }
      request.post("/finish", lineValue).then(res => {
        console.log(res);
      });
    },
    delete: function (obj){
      let whichLi=obj.parentNode;
      if(!whichLi.getElementsByTagName("input")[0].checked)
        this.num--;
      this.updateNum();
      document.getElementById("taskList").removeChild(whichLi);
      let lineValue = {
        id: whichLi.id,
        content: whichLi.getElementsByTagName("span")[0].textContent,
        status: 0,
        exist: 0,
      }
      request.post("/delete", lineValue).then(res => {
        console.log(res);
      });
    },
    addItem: function (obj){
      this.updateNum();
      let newLi=document.createElement("li");
      if(obj.status) {
        newLi.setAttribute("class","listItem taskInput");
        this.num++;
      }
      else newLi.setAttribute("class","listItem taskInput listItemChecked");
      newLi.setAttribute("id", obj.id);
      //newLi.setAttribute("style", "display: flex");
      let newCheckBox=document.createElement("input");
      newCheckBox.setAttribute("type","checkbox");
      newCheckBox.setAttribute("onclick","windowDeleteLine(this)");
      if(!obj.status) newCheckBox.setAttribute("checked", "checked");
      let delButton = document.createElement("button");
      delButton.setAttribute("type","submit");
      delButton.setAttribute("class","delbutton");
      delButton.setAttribute("onclick","windowDelLi(this)");
      delButton.appendChild(document.createTextNode("×"));
      let text=document.createElement("span");
      text.appendChild(document.createTextNode(obj.content));
      newLi.appendChild(newCheckBox);
      newLi.appendChild(text);
      newLi.appendChild(delButton);
      document.getElementById("taskList").appendChild(newLi);
      this.$forceUpdate();
    },
    createLine: function (){
      for(let i=0;i<this.line.length;i++){
        this.addItem(this.line[i]);
      }
    },
	submitTask: function(event) {
        if (event) {
			if(document.getElementById("inputLine").value!=""){
				this.save();
        document.getElementById("inputLine").value="";
			}
		}
    },
	deleteLine: function(obj){
    this.finish(obj);
	},
	delLi: function(obj){
		this.delete(obj);
	},
	smdown: function(event) {
		if(event){
			event.target.style.height="37px";
			event.target.style.width="23%";
		}
	},
	smup: function(event) {
		if(event){
			event.target.style.height="40px";
			event.target.style.width="25%";
		}
	},
	updateNum: function(){
		if(this.num == 1)document.getElementById("numDisplay").textContent=this.num+" item left";
		else document.getElementById("numDisplay").textContent=this.num+" items left";
	},
	updateList: function(){
		
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
h1 {
	color: yellowgreen;
	text-align: center;
	text-shadow: grey 5px 5px 5px;
	font-size: 80px;
}
.mainSection {
	margin: auto;
	min-width: 200px;
	max-width: 400px;
	width: 100%;
}
.inputDiv {
	display: flex;
}
.taskInput {
	display: inline-block;
	text-align: left;
	margin: auto;
	border: 0;
	padding-left: 10px;
	width: 100%;
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
	font-size: 18px;
	color: gray;
	text-shadow: gray 1px 1px 10px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
				0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.inputLine {
	margin: auto;
	margin-left: 0;
	border: 0;
	padding-left: 10px;
	width: 70%;
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
	font-size: 18px;
	color: gray;
	text-shadow: gray 1px 1px 10px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
				0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.smbtn {
	margin: auto;
	border: 0;
	padding-left: 10px;
	width: 25%;
	line-height: 40px;
	border-radius: 5px;
	font-size: 18px;
	color: gray;
	text-shadow: gray 1px 1px 10px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
				0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.ulist {
	padding:0;
	list-style: none;
	background-color: white;
}
.listItem {
	margin: 2px 0;
	font-weight: bold;
}
.listItemChecked {
	text-decoration: line-through;
	font-weight: 200;
}
.listFoot {
	background-color: honeydew;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
				0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.mainContent {
	margin: auto;
	min-width: 200px;
	max-width: 400px;
	width: 80%;
}
.pageFooter {
	margin: auto;
	min-width: 200px;
	max-width: 400px;
	width: 80%;
	font-size: 10px;
	text-align: center;
}
.delbutton {
	border: 0;
	float: right;
	height: 100%;
	width: 30px;
	color: gray;
	vertical-align: middle;
	font-size: 25px;
}
.pageFooterText {
	color: #808080;
	text-shadow: gray 1px 1px 5px;
}
</style>
